<template>
    <div>
        <el-card class="box-card">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80" label-position="right">
                <el-form-item label="原密码" prop="originalPwd">
                    <el-input v-model="ruleForm.originalPwd" />
                </el-form-item>
                <el-form-item label="密码" prop="pwd">
                    <el-input v-model="ruleForm.pwd" />
                </el-form-item>
                <el-form-item label="确认密码" prop="surePwd">
                    <el-input v-model="ruleForm.surePwd" />
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        确定
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>

        </el-card>
    </div>
</template>
<script lang="ts" setup>
import { ElCard } from 'element-plus';
import { reactive, ref } from 'vue'

import type { FormInstance, FormRules } from 'element-plus'

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    pwd: '',
    surePwd:'',
    originalPwd:''
})
//验证规则
const rules = reactive<FormRules>({
    pwd: [
        { required: true, message: '请输入密码', trigger: 'blur' },
    ],
    surePwd: [
        { required: true, message: '确认密码', trigger: 'blur' },
    ],
    originalPwd:[
        { required: true, message: '确认密码', trigger: 'blur' },
    ],
})
//提交
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}
//重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
</script>
<style scoped lang="less">
.box-card{
    width: 50%;
    margin: auto;
}
</style>